<template>
  <section class="home">
    <header class="header">
      <h1>上海铁路公安局大数据综合应用平台-通知通报</h1>
    </header>
    <div class="container">
        <p class="title">{{ notice.title }}</p>
        <div class="content" v-html="content"></div>
    </div>
  </section>
</template>

<script>
import { getNoticeDetail } from '../api/api'
export default {
  data() {
    return {
      notice: {
        title: '222',
        content: '234234'
      },
      content: '123123'
    }
  },
  created() {
    let id = this.$route.params.id;
    getNoticeDetail({id}).then((res) => {
      this.notice = res.data.data;
      this.content = this.HTMLDecode(this.notice.content);
    })
  },
  watch: {
    
  },
  methods: {
    HTMLDecode(text) { 
      var temp = document.createElement("div"); 
      temp.innerHTML = text; 
      var output = temp.innerText || temp.textContent; 
      temp = null; 
      return output; 
    } 
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/sass/common.scss';
@import '../assets/sass/homePage.scss';

.container{
  width: 62.5%;
  height: 920 / 1080 * $height;
  margin: 0 auto;
  color: #fff;
  font-size: 16px;
  border-radius: 4px;
  margin-top: 20px;
  background-color: rgba(0, 117, 169, 0.1);
}

.title{
  line-height: 50px;
  font-size: 18px;
  text-align: center;
  margin-bottom: 10px;
}
.content{
  text-indent: 20px;
  word-break: break-all;
  word-wrap: break-word;
  padding: 0 20px;
}

</style>
